<template>
  <div class="processdetail1">
    <audio ref="audioRef" @ended="run" :src="newUrl"></audio>
    <img src="@/static/processdetail1.jpg" alt="">
    <a-button @click="play" class="playbtn">播放音乐</a-button>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits } from 'vue';

const props = defineProps({
  mymp3: {
    type: String,
    required: true
  }
});

const emits = defineEmits(['end']);
const run = () => {
  setTimeout(() => {
    emits('end', 1);
  }, 1000);
};

const audioRef = ref();
const newUrl = ref('');

const play = () => {
  const audioElement = audioRef.value;
  if (audioElement) {
    audioElement.play().catch(error => {
      console.error('Error playing audio:', error);
    });
    setTimeout(() => {
      audioElement.pause();
      audioElement.currentTime = 0;
      run();
    }, 8000); // 10 seconds = 10000 milliseconds
  }
};

onMounted(() => {
  try {
    // 构造新的URL
    newUrl.value = new URL(props.mymp3, import.meta.url).href;

    // 获取audio元素并自动播放
    const audioElement = audioRef.value;
    if (audioElement) {
      setTimeout(() => {
        audioElement.play().catch(error => {
          console.error('Error playing audio:', error);
        });
        setTimeout(() => {
          audioElement.pause();
          audioElement.currentTime = 0;
    run();
        }, 8000); // 10 seconds = 10000 milliseconds
      }, 1000);
    }
  } catch (error) {
    console.error('Error constructing URL:', error);
  }
});
</script>

<style scoped>
.processdetail1 {
  height: 30rem;
  width: 40rem;
}

img {
  height: 100%;
  width: 100%;
}

.playbtn {
  height: 6rem;
  width: 20rem;
  font-size: 3rem;
}
</style>
